<template>
    <div class="container">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 股权分配
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form :model="form" :rules="formRules" ref="form" label-width="180px" class="demo-ruleForm">
                <el-form-item label="公司" required prop="cid">
                   <!-- <el-select v-model="form.cid" placeholder="公司" class="handle-select mr10" @change="getValue()" >
                        <el-option  label="请选择公司" value=""></el-option>
                        <el-option
                                v-for="(item,index) in companyList"
                                :key="index+'1'"
                                :value="item.cid"
                                :label="item.companyName"
                        ></el-option>
                    </el-select>-->
                    <el-input v-model="companyName" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="持股人" prop="pid" required>
                    <el-select v-model="form.pid" placeholder="持股人" class="handle-select mr10" >
                        <el-option key="1" label="请选择持股人" value=""></el-option>
                        <el-option
                                v-for="(item,index) in partnerList"
                                :key="index+'1'"
                                :value="item.pid"
                                :label="item.partnerName"
                        ></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="投资人类型" required prop="stockType">
                    <el-select v-model="form.stockType" placeholder="投资人类型" class="handle-select mr10"  >
                        <el-option  key="1" label="请选择投资人类型" value=""></el-option>
                        <el-option key="2" label="自然人股东" value="自然人股东"></el-option>
                        <el-option key="3" label="法人股东" value="法人股东"></el-option>
                        <el-option key="4" label="事业法人" value="事业法人"></el-option>
                        <el-option key="5" label="机关法人" value="机关法人"></el-option>
                        <el-option key="6" label="企业法人" value="企业法人"></el-option>
                    </el-select>
                </el-form-item>
              <!--  <el-form-item label="出资比例">
                    <el-input v-model="form.stockPercent" ></el-input>
                </el-form-item>-->
                <el-form-item required prop="shouldCapi" label="认缴出资额（万元）">
                    <el-input v-model="form.shouldCapi"></el-input>
                </el-form-item>
                <el-form-item  label="认缴出资时间" required prop="shoudDate">
                    <el-date-picker
                            v-model="form.shoudDate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  required prop="investType" label="出资方式">
                    <el-select v-model="form.investType" placeholder="请选择出资方式" class="handle-select mr10">
                        <el-option key="1" label="请选择出资方式" value=""></el-option>
                        <el-option key="2" label="货币" value="货币"></el-option>
                        <el-option key="3" label="非货币（现物）" value="非货币（现物）"></el-option>
                    </el-select>
                </el-form-item>
               <!-- <el-form-item label="实出资方式">
                    <el-input v-model="form.investName" ></el-input>
                </el-form-item>-->
                <el-form-item  required prop="realCapi" label="实缴出资额（万元）">
                    <el-input v-model="form.realCapi"></el-input>
                </el-form-item>
                <el-form-item  required prop="capiDate" label="实缴时间">
                    <el-date-picker
                            v-model="form.capiDate"
                            type="date"
                            prop="capiDate"
                            placeholder="选择日期"
                            :picker-options="capiTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="职位">
                    <el-input v-model="form.job"></el-input>
                </el-form-item>
               <!-- <el-form-item label="最终受益股份">
                    <el-input v-model="form.FinalBenefitPercent" ></el-input>
                </el-form-item>-->
                <el-form-item  label="薪资">
                    <el-input v-model="form.salary"></el-input>
                </el-form-item>
                <el-form-item  label="股份类型">
                    <el-select v-model="form.typeshares" placeholder="请选择股份类型" class="handle-select mr10">
                        <el-option key="1" label="请选择股份类型" value=""></el-option>
                        <el-option key="2" label="流通A股" value="流通A股"></el-option>
                        <el-option key="3" label="流通B股" value="流通B股"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="出任开始时间">
                    <el-date-picker
                            v-model="form.beginDate"
                            type="date"
                            placeholder="选择日期"
                            prop="beginDate">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="结束时间">
                    <el-date-picker
                            v-model="form.endDate"
                            type="date"
                            prop="endDate"
                            placeholder="选择日期"
                            :picker-options="endTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="公告时间">
                    <el-date-picker
                            v-model="form.announcementDate"
                            type="date"
                            prop="announcementDate"
                            placeholder="选择日期"
                            :picker-options="announcementTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click=" resetForm('form')">取 消</el-button>
                    <el-button type="primary" @click="saveEdit('form')">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
    export default {
        name: "CompanyPEditor",
        data() {
            var isNum = (rule, value, callback) => {
                console.log(this._data.nums)
                var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                if (reg.test(value.trim())) {
                    if(value.trim()<= this._data.nums){
                        callback()
                    }else {
                        callback(new Error('请输入0~'+this._data.nums+'有效字符'))
                    }
                }else{

                    callback(new Error('请输入有效字符'))
                }
            }
            return {
                form:{
                    pid:'',
                    cid:'',
                    stockType:'',
                    stockPercent:'',
                    shouldCapi:'',
                    shoudDate:'',
                    investType:'',
                    investName:'',
                    realCapi:'',
                    capiDate:'',
                    job:'',
                    finalBenefitPercent:'',
                    salary:'',
                    typeshares:'',
                    beginDate:'',
                    endDate:'',
                    announcementDate:''
                },
                formRules:{
                    pid: [
                        { required: true, message: '请选择持股人', trigger: 'change' }
                    ],
                    realCapi: [
                        { required: true, validator:isNum, trigger: 'blur' }
                    ],
                    shouldCapi: [
                        { required: true, validator:isNum,  trigger: 'blur' }
                    ]

                },
                // 开始时间小于结束时间，且开始时间小于此刻
                announcementTime: {
                    disabledDate: time => {
                    if (this.form.endDate) {
                        return time.getTime() < new Date(this.form.endDate).getTime()
            } else {
                return time.getTime() > Date.now()
            }
        }
        },
            // 结束时间大于开始时间，且小于此刻
            endTime:{
                disabledDate:time => {
                    if (this.form.startDate) {
                        time.getTime() > new Date(this.form.startDate).getTime()
                    } else {
                        return time.getTime() < Date.now()
                    }
                }
            },
            capiTime:{
                disabledDate:time => {
                    if (this.form.shoudDate) {
                        time.getTime() < new Date(this.form.shoudDate).getTime()
                    } else {
                        return time.getTime() < Date.now()
                    }
                }
            },
            partnerList:{},
            companyList:{},
            companyName:'',
                numbers:'',
                nums:''

            };
        },
        created() {
            this.getPartner();
            this.getCompany();

        },
        methods: {
            saveEdit(formName) {
                const _this = this;
                _this.$refs[formName].validate((valid) => {
                    if(valid) {
                        const num =parseFloat(_this.form.realCapi / _this.numbers*100).toFixed(2);
                        _this.form.investName = _this.form.investType;
                        _this.form.stockPercent =num;
                        _this.form.finalBenefitPercent =num;
                        _this.$axios.post("/partnerinfo/saveEdit", _this.form).then(res => {
                            if(res.status = 200)
                        {
                            this.$message.success(res.data.msg);
                            this.$router.push('/partnerInfo');
                        }
                    else
                        {
                            this.$message.error(res.data.msg);
                        }
                    });
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.editVisible = false;
            },
            getPartner() {
                const _this = this
                _this.$axios.get("/partner/finaAll").then(res =>  {
                    _this.partnerList = res.data.data
            })

            },
            getCompany(){
                const  _this =this;
                if (this.$route.query.cid != undefined) {
                    this.$axios.get('/companydata/numberSum/' + this.$route.query.cid).then((res) => {
                        console.log(res.data.data);
                        _this.form.cid=this.$route.query.cid;
                    _this.companyName=res.data.data.companyName;
                    _this.numbers=res.data.data.paidCapital;
                    _this.nums=res.data.data.registerCapital;
                })
                }
            }
        }
    }
</script>

<style scoped>
.form-box{
    width: 700px;
    margin:  0 auto;
}
</style>